<div class="pipelineAdmin">
    <app-zone header="{{ 'pipeline_administration' | translate }}">
        <app-zone-content>
            <form class="ui form" (ngSubmit)="updatePipeline()" #projectUpdateFrom="ngForm">
                <div class="eight wide field">
                    <label>{{ 'pipeline_name' | translate}}</label>
                    <input type="text" [(ngModel)]="editablePipeline.name" name="pipname" [disabled]="loading">
                </div>
                <div class="sixteen wide field">
                    <label>{{ 'pipeline_description' | translate}}</label>
                    <textarea type="text" [(ngModel)]="editablePipeline.description" name="pipdesc" [disabled]="loading">
                  </textarea>
                </div>
                <div class="fields">
                    <div class="sixteen wide bottom right aligned field">
                        <button class="ui button green button" [class.disabled]="loading || editablePipeline.from_repository" type="submit">{{ 'btn_save' |
                            translate }}</button>
                    </div>
                </div>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'danger_zone' | translate }}" headerClass="red inverted">
        <app-zone-content class="bottom">
            <div class="ui grid">
                <div class="eight wide column">
                    <div class="title">{{ 'pipeline_delete_label' | translate}}</div>
                    <div class="description">{{ 'pipeline_delete_description' | translate}}</div>
                </div>
                <div class="eight wide right aligned column">
                    <app-delete-button [loading]="loading" (event)="deletePipeline()"></app-delete-button>
                </div>
            </div>
        </app-zone-content>
    </app-zone>
</div>
